<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
<div class="row">
	<div class="col-xs-12">
		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">
					子菜单列表
				</div>

				<div>
					<table id="menuSubListTable" class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
									<th style="text-align: center;">菜单编号</th>
									<th style="text-align: center;">菜单名称</th>
									<th style="text-align: center;">是否子菜单</th>
									<th style="text-align: center;">菜单地址</th>
									<th style="text-align: center;">父菜单编号</th>
									<th style="text-align: center;">菜单样式</th>
									<th style="text-align: center;">操作</th>
							</tr>
						</thead>
						<tbody>
						    <c:forEach items="${menuList }" var="menu">
							    <tr>
									<td>${menu.menuId}</td>
									<td>${menu.menuName}</td>
									<td>
									<hw:dictName dictType='D00001' dictCode='${menu.isLeaf}'/>
									</td>
									<td>${menu.menuUrl}</td>
									<td>${menu.parentMenu}</td>
									<td>${menu.menuClass}</td>
									<td>
										<div class="hidden-sm hidden-xs action-buttons">
											<a class="blue" href="javascript:void(0)" onclick="detailSubMenu('${menu.menuId}','show')" title="修改">
												<i class="ace-icon fa fa-search-plus bigger-130"></i>
											</a>
											<a class="red" href="javascript:void(0)" onclick="removeSubMenu('${menu.menuId}','${menu.parentMenu}')" title="删除">
												<i class="ace-icon fa fa-trash-o bigger-130"></i>
											</a>
										</div>
									</td>
								</tr>
								</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="menuSubIframe"></div>

<script type="text/javascript">
	
var subDataTables;		
var scripts = [null, null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	
	$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
		_title: function(title) {
			var $title = this.options.title || '&nbsp;'
			if( ("title_html" in this.options) && this.options.title_html == true )
				title.html($title);
			else title.text($title);
		}
	}));
	
	
	subDataTables = $("#menuSubListTable").dataTable({
	     bAutoWidth: false,
	     "oLanguage" : oLanguage,
	     "bDestroy":true,
		"aoColumnDefs": [{"bSortable": false, "aTargets": [1,3,4,5,6]}],
		"aaSorting": [],
		"fnInitComplete": function(param){
			$("#menuSubListTable_filter").append("<button class=\"btn btn-sm btn-info btn-right\" type=\"button\" id=\"addSubMenu\">"+
					"<i class=\"ace-icon fa fa-plus-square bigger-110\"></i>"+
						"新增"+
					"</button>");
		}
	});
	
	
	$("#addSubMenu").on("click",function(){
		detailSubMenu("${parentId}","add");
	});	
	
	
	//新增/修改 dialog
	$('#menuSubIframe').dialog({
		hide:true,
		autoOpen:false,
		width: 850,
		height:700,
		modal:true,
		title: "<div class='widget-header'><h4 class='smaller'><i class='ace-icon fa fa-cog green'></i>&nbsp;菜单管理</h4></div>",
		title_html: true,
		open: function (event,ui) {
			var flag = $(this).data('flag');
			if(flag == "add"){
				$("#btnSubModify").hide();
				$("#btnSubSave").show();
				$("#btnSubDelete").hide();
				$("#btnSubCancle").hide();
				$("#btnSubClose").show();
			}else if(flag == "show"){
				$("#btnSubModify").show();
				$("#btnSubSave").hide();
				$("#btnSubDelete").show();
				$("#btnSubCancle").hide();
				$("#btnSubClose").show();
			}
		},
		buttons: [
			{
				id: "btnSubModify",
				html: "<i class='ace-icon fa fa-pencil-square-o bigger-110'></i>&nbsp; 修改",
				"class" : "btn btn-primary btn-minier",
				click: function() {
					
					$("#btnSubModify").hide();
					$("#btnSubSave").show();
					$("#btnSubDelete").hide();
					$("#btnSubCancle").show();
					$("#btnSubClose").show();
					
					modify();
				}
			},
			{
				id: "btnSubSave",
				html: "<i class='ace-icon fa fa-floppy-o bigger-110'></i>&nbsp; 保存",
				"class" : "btn btn-success btn-minier",
				click: function() {
					save();
				}
			},
			{
				id: "btnSubCancle",
				html: "<i class='ace-icon fa fa-undo bigger-110'></i>&nbsp; 取消",
				"class" : "btn btn-warning btn-minier",
				click: function() {
					cancle();
				}
			},												
			{
				id: "btnSubClose",
				html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 关闭",
				"class" : "btn btn-minier",
				click: function() {
					$(this).dialog("close");
					$(this).empty();
				}
			}				
		]				
	});
	
	
});


function detailSubMenu(menuId,flag){
	$("#menuSubIframe").load("${ctx}/menu/toDetail?pk=" + menuId+"&flag="+flag,function(){
		$('#menuSubIframe').data("flag",flag).dialog("open");
	});
}

function removeSubMenu(menuId,parentId){
	removeItem(menuId,function(){
		$("#menuSubListIframe").load("${ctx}/menu/list.do?parentId="+parentId);
	});
}
var active_class = 'success';
$('#menuSubListTable').on('dblclick', 'tbody tr' , function(){
	var $row = $(this).closest('tr');
	if ($row.hasClass(active_class) == false) {
		subDataTables.$('tr.' + active_class).removeClass(active_class);
		$row.addClass(active_class);
	}
	var aData = subDataTables.fnGetData(this); 
	if (aData == null) {
		return;
	} 
	detailSubMenu(aData[0],'show');
});	

</script>